<%--
  Created by IntelliJ IDEA.
  User: 71027
  Date: 2019/5/16
  Time: 11:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试当前分页代码</title>
</head>
<body>

<%--testv3【测试未完成。这个已经会了。】--%>
<%--todo 分页模板三（来自testv3这个页面）【测试区域】--%>
<div>
    <ul id='bp-3-element-test'></ul>
</div>



<%--根据教程学会了。--%>
<p>测试区域。</p>
<div id="example"></div><%--仅需一个div，自动生成？页码区域？--%>
<script type='text/javascript'>
    var options = {
        /*加很多参数。*/


        currentPage: 3,/*当前页码。*/
        totalPages: 10,/*总页码。【从后台来。】*/
        size:"Large",/*大小？*//*Mini  Small  Normal  Large*/
        alignment:"left",/*对齐？？？【？没居中？？？】*//* Left  Center  Right*/
        useBootstrapTooltip:true,/*use Bootstrap Tooltip???【】*/
        tooltipTitles: function (type, page, current) {
            /*ok*/
            switch (type) {
                case "first":
                    return "Tooltip for first page";
                case "prev":
                    return "Tooltip for previous page";
                case "next":
                    return "Tooltip for next page";
                case "last":
                    return "Tooltip for last page";
                case "page":
                    return "Tooltip for page " + page;
            }
        },
        itemTexts: function (type, page, current) {
            /*???这是什么？？？【？修改文本内容。】*/
            switch (type) {
                case "first":
                    return "First";
                case "prev":
                    return "Previous";
                case "next":
                    return "Next";
                case "last":
                    return "Last";
                case "page":
                    return "p"+page;
            }
        },
        bootstrapTooltipOptions: {/*这个和true是对应的。可以设置什么？？？*/
            html: true,
            placement: 'bottom'
        },
        /*itemContainerClass: function (type, page, current) {/!*这是什么？？？*!/
            /!*测试？换了一个指针样子。*!/
            return (page === current) ? "active" : "pointer-cursor";
        }*/
        numberOfPages:5,/*最大页面，一次显示几个。？？*/
        pageUrl: function(type, page, current){
            /*设置url？？？【而非ajax？？？】页面跳转。*/
            return "http://example.com/list/page/"+page;

        },
        shouldShowPage:function(type, page, current){
            /*隐藏不需要的.*/
            switch(type)
            {
                case "first":
                case "last":
                    return false;/*隐藏？？？*/
                default:
                    return true;
            }
        },
        /*没有代码？？？*/
        /*Besides show function, there are some variants. They are, showFirst, showPrevious, showNext and showLast.*/
        /*这是变体和show function*/

        /*没有代码？？？【？】*/
        /*Function getPages returns an array with extra attributes that state the current status of the Bootstrap Paginator Component.
        Additional attributes 【first, prev, next and last】 refer to the four different types of page items. 【current】 attribute tells the current page value of the component. 【total】 tells the total pages and 【numberOfPages]】 tells the number of numeric pages being shown.*/

        /*没有代码？？？*/
        /*setOptions function*/
        /*Function setOptions updates the options for Bootstrap Paginator. You don't have to call the method specifically after initialization, just use $('#example').bootstrapPaginator(optionsToUpdate) can also achieve the same effect. The following example will allow you to set numberOfPages and totalPages attribute.*/



        /*我需要的代码。*/
        /*page-clicked Event*/
        /*The event page-clicked will be triggered when a page item is clicked. You can register the handler via the attribute onPageClicked or you can simply use the on('page-clicked',handler). The signature of the handler is function(event, originalEvent, type,page). The originalEvent is the original click event generated by the page item. It exists for the case that you might want to get call preventDefault or stopPropagation on it. The following example will shows the type and page in the alert when the page is clicked.*/

        onPageClicked: function(e,originalEvent,type,page){
            /*控制当前页面的值？？？*/
            $('#alert-content').text("Page item clicked, type: "+type+" page: "+page);
        },

        /*Stopping the page change within Page Clicked event*/
        /*If an ajax call is triggered through page click event and you want the page change happen after the content is loaded. You can simply stop the default page change event by calling event.stopImmediatePropagation() and do it later when the document is loaded.*/
        /*这个是重复的。【？？？？】*/
        onPageClicked: function(e,originalEvent,type,page) {

            e.stopImmediatePropagation();
            /*就是这个方法吧。什么意思啊？？？【？？？】*/

            var currentTarget = $(e.currentTarget);
            /*这个函数是什么？？？意思？？？？【根据它获取值。】*/

            var pages = currentTarget.bootstrapPaginator("getPages");
            /*【还有内部代码。】*/

            $('#alert-content').text("Page item clicked, current page: " + pages.current);
            /*先。操控页面。*/

            setTimeout(function () {

                currentTarget.bootstrapPaginator("show", page);
                /*又是调用它的内部方法。【？？？】【这个函数什么意思？？？】*/

                var pages = currentTarget.bootstrapPaginator("getPages");
                /*同样的代码【不嵌入。】*/

                $('#alert-content').append("<br/>Page item click finished, current page: " + pages.current);
                /*操控页面。【？？？】*/

            }, 3000);
            /*过一段时间。在执行。这个东西？？？？*/
        },
        /*page-changed Event*/
        /*传递页面值。*/
        onPageChanged: function(e,oldPage,newPage){
            $('#alert-content').text("Current page changed, old: "+oldPage+" new: "+newPage);
        }
        /**/




    }

    $('#example').bootstrapPaginator(options);/*输入参数。*/
    /*点了触发事件但是怎么修改div内容呢？或者table【？】*/
    /*神奇的区域变成页码区。*/
</script>
</body>
</html>
